Разработка приложения Sushi App. Часть 1

➡️Ссылка на репозиторий с кодом этого урока (ветка main)

Компонент для карточки с роллами

Теперь нужно сделать отдельную карточку товара с роллами как компонент.
Для этого добавим в папку widget файл roll_card.dart

Файл roll_card.dart

import 'package:flutter/material.dart';

class RollCard extends StatelessWidget {
  const RollCard({super.key});

  @override
  Widget build(BuildContext context) {
    return InkWell(
      onTap: () {},
      child: Card(
        color: Colors.white,
        child: Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisSize: MainAxisSize.min,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Expanded(
                child: ClipRRect(
                  borderRadius: const BorderRadius.only(
                    topLeft: Radius.circular(12),
                    topRight: Radius.circular(12),
                  ),
                  child: Image.asset(
                    'assets/images/roll1.jpg',
                    width: double.infinity,
                    fit: BoxFit.cover,
                  ),
                ),
              ),
              Expanded(
                child: ListTile(
                  contentPadding: EdgeInsets.zero,
                  title: Text("Калифорния"),
                  subtitle: Text(
                    "Краб, авокадо, икра",
                    style: const TextStyle(fontSize: 10),
                  ),
                ),
              ),
              Row(
                mainAxisAlignment: MainAxisAlignment.spaceBetween,
                children: [
                  Text("500 руб."),
                  TextButton(
                    onPressed: () {
                      // Здесь можно добавить логику покупки
                    },
                    child: const Text("Купить"),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );
  }
}

                  

Assets

Конечно нужно подготовить и добавить все ассеты/изображения в папке assets/images и указать в файле конфигурации pubspec.yaml

Скачать изображения 

Теперь в файле main_screen.dart передаем внутрь itemBuilder виджет карточки

Файл main_screen.dart

//...
itemBuilder: (context, index) {
  return RollCard();
},
//...